<template>
    <div class="mylscard">
        <div class="tit">
            <span>{{ parentData.is_trans == 0 ? "自取订单" : "快递订单" }}</span>
            <span class="status" v-if="parentData.status==1">待自取</span>
            <span class="status" v-else-if="parentData.status==5">待结算</span>
            <span class="status" v-else-if="parentData.status==6">待收货</span>
            <span class="status" v-else-if="parentData.status==10">已发货</span>
            <span class="status" v-else-if="parentData.status==20">交易成功</span>
        </div>
        <div class="id">订单编号:{{ parentData.orderid }}</div>
        <div class="info" v-for="item in parentData.product_list" :key="item.tag + item.product_name">
            <img :src="item.image" alt="">
            <div class="con">
                <!-- {{ JSON.parse(item).status }}{{item}} -->
                <div class="title">{{ item.product_name }}</div>
                <div class="slec">规格:{{ item.parameters }}</div>
                <div class="btm">
                    <div class="price">¥{{ item.total }}</div>
                    <!-- <van-button @click="clickOK(item.id)">
                        {{ item.status }}{{
                        item.status == 1 ? "确认已取" : item.status == 5 ? "确认结算" : item.status == 6 ? "催促发货" :
                        item.status == 10 ? "确认收货" : item.status == 20 ? "确认收货":""
                        }}</van-button> -->
                    <!-- <div>
                    </div> -->
                    <van-button v-if="item.status==1" @click="clickOK(item.id)">确认已取</van-button>
                    <van-button v-else-if="item.status==5">确认已取</van-button>
                    <van-button v-else-if="item.status==6">确认已取</van-button>
                    <van-button v-else-if="item.status==10">确认已取</van-button>
                    <van-button v-else-if="item.status==20">删除订单</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmit } from 'vue'
// 定义props
const props = defineProps(['parentData']);
const emit = defineEmit(['clickOK']);
function clickOK(id: any) {
    //goods为商品信息传递给父组件
    emit("clickOK", id)
}
// 使用props
const { parentData } = props;
</script>

<style scoped lang="less">
.mylscard {
    width: 345px;
    height: 100%;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    padding: 13px 15px;
    border-radius: 15px 15px 15px 15px;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
    box-sizing: border-box;
    margin: 19px 15px;
    // position: relative;

    .tit {
        width: 100%;
        height: 40px;
        font-size: 14px;
        color: #3D3D3D;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #E1E1E1;

        .status {
            font-size: 12px;
            color: #0A84FF;
        }
    }

    .id {
        width: 100%;
        font-size: 11px;
        color: #666666;
        margin-top: 7px;
        text-align: left;
    }

    .info {
        display: flex;
        justify-content: flex-start;
        // height: 100%;
        width: 100%;
        margin-top: 7px;

        img {
            width: 83px;
            height: 72px;
            border-radius: 4px 4px 4px 4px;
            margin-right: 6px;
        }

        .con {
            // height: 100%;
            width: 100%;
            text-align: left;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .btm {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .van-button {
                    width: 80px;
                    height: 31px;
                    background: linear-gradient(143deg, #0A84FF 0%, #0A7EF3 100%);
                    border-radius: 347px 347px 347px 347px;
                    font-size: 14px;
                    color: #FFFFFF;
                    white-space: nowrap;
                    // position: absolute;
                    // bottom: 15px;
                    // right: 15px;
                }
            }
        }
    }
}
</style>